<template>
  <!--富文本编辑器-->
  <a-spin :spinning="spinning" tip="上传中。。。">
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
  </div>
  </a-spin>
</template>
<script>
/* eslint-disable */
  import E from "wangeditor";
import {uploadVideo} from '@/api/courseManage/live'
  export default {
    name: "Editor",
    inject: ['upShow'],
    data() {
      return {
        editor: null,
        spinning:false
      };
    },
    props: {
        editorContent: [String,Object,Array]
    },
    watch: {
      editorContent: {
        immediate: true,
        handler (value) {
//          console.log(value)
          /*if (value !== this.editor.txt.html()) {
            this.editor.txt.html(this.editorContent)
          }*/
          try{this.editor.txt.html(this.editorContent)}catch(err){}
        }
      }
    },
    mounted() {
        var that = this
      this.editor = new E(this.$refs.editorElem);
      /*var td=document.getElementsByClassName('w-e-text');
      td.innerHTML = this.editorContent
      console.log('td:' + JSON.stringify(td));
      */
//      console.log(this.editor["txt"])

      // 编辑器的事件，每次改变会获取其html内容
      this.editor.customConfig.onchange = html => {
//        console.log('html:' + html);
        this.$emit('catchData',html); // 把这个html通过catchData的方法传入父组件
      };
      this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
//        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
      this.editor.customConfig.uploadImgMaxSize = 15 * 1024 * 1024; // 将图片大小限制为15M

      this.editor.customConfig.customUploadImg = function (files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        files.forEach((item) => {
          let fd = new FormData();
          fd.append('file', item); // 上传的文件： 键名，键值
          // 以下是上传图片的接口                                                   teachService.FileUploadInTencent(fd).then((data) => {
          that.spinning = true
          uploadVideo(fd).then(res => {
            that.spinning = false
            if(res.code == 200) {
                that.upShow(1,'上传成功')
              // 上传代码返回结果之后，将图片插入到编辑器中
              let url = 'http://47.99.194.179:8888/' + res.data.fileUrl
//              console.log('url:' + url);
              insert(url)
            } else {
              that.upShow(2,'上传失败')
            }
          }).catch(e=> {
            that.spinning = false
            that.upShow(2,'上传失败')
          })
        })
      };

      this.editor.create()// 创建富文本实例

      this.editor.txt.html(this.editorContent)
    }
  }
</script>